<template>
	<view class="container">
		<view class="main">
			<template v-if="action === 'add'">
				<RouteMakeNav :curProgress="1" @navBack="goBack" @navForward="goForward"></RouteMakeNav>
			</template>
			<template v-if="action === 'edit'">
				<view class="Row1">
					<text class="edit-heading">修改景点路线</text>
					<image src="@/static/arrowRight.svg" class="icon" role="button" aria-label="下一步" @click="goForward"></image>
				</view>
			</template>
			
			<view class="Row3">
				<view class="m3">
					<view class="flex--col">
						<view v-if="action === 'edit'">
						</view>
						<view class="attractions-list flex--col" v-for="(spot,index) in route.preparedAttractions" :key="index" >
							<view class="flex--row flex--between">
								<view class="attraction-item flex--row">
									<image :src="spot.img" :aria-label="spot.name+'照片'" mode="aspectFill" class="pic flex--shrink-0"></image>
									<view class="txt flex--col flex--gap-20">
										<view class="third-heading--main">
											{{ spot.name }}
										</view> 
										<view class="third-heading--sub spot-address">
										    {{ spot.address || spot.description || "无相关标注" }}
										</view>
									</view>
								</view>
								<view class="icon-group flex--col flex--gap-20">
									<image src="@/static/minus-square-Bold.svg" class="icon" @click="removeSpot(index)" role="button" aria-label="移除景点"></image>
									<image :src="'../../static/numbers/'+(index+1)+'.svg'" :aria-label="'第'+index+1+'站'" class="icon"/>
								</view> 
							</view>
						    <view class="m4">
						    	<view class="v1 flex--gap-20">
						    		<view class="consumetime">
						    			<view class="title">游览耗时(h)</view>
										<input class="uni-input input--line" 
										@input="formatTimeInput($event,spot)"
										 v-model="spot.time" type="number"  />
						    		</view>
						    		<view class="consumemoney">
						    			<view class="title">游览花费(元)</view>
										<input class="uni-input input--line" 
										 v-model="spot.amount" type="number" />
						    		</view>
						    	</view>
						    	<view class="v2">
						    		<view class="title">浏览备注</view>
									<input class="uni-input input--line" maxlength="20" v-model="spot.description" type="text" />
						    	</view>
						    	
						    </view>
						</view>
					</ul>
				</view>
			</view>
			<view class="Row4">
				<view class="m5">
					<view class="route__summary">
						<view class="left">
							<img src="@/static/time.svg" alt="" class="icon">
							<view class="route__summary__decription">
								<view class="route__summary__title">
									预计游玩耗时
								</view>
								<view class="route__summary__note">
									耗时不包括交通费用
								</view>
							</view>
						</view>
						<view class="right">
							<view class="route__summary__number">
								{{ time+"h" }}
							</view>
						</view>
					</view>
					
					<view class="route__summary">
						<view class="left">
							<img src="@/static/coin.svg" alt="" class="icon">
							<view class="route__summary__decription">
								<view class="route__summary__title">
									预计游玩花费
								</view>
								<view class="route__summary__note">
									花费不包括交通花费
								</view>
							</view>
						</view>
						<view class="right">
							<view class="route__summary__number">
								{{ amount + "元" }}
							</view>
						</view>
					</view>
					
					<view class="route__summary">
						<view class="left">
							<img src="@/static/distance.svg" alt="" class="icon">
							<view class="route__summary__decription">
								<view class="route__summary__title">
									预估路线长度
								</view>
								<view class="route__summary__note">
									以最短距离估算
								</view>
							</view>
						</view>
						<view class="right">
							<view class="route__summary__number">
							{{ route.distance+"km" }}
							</view>
						</view>
					</view>
				
				</view>
				
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	import RouteMakeNav from "./components/RouteMakeNav.vue"
	export default {
		components:{
			RouteMakeNav
		},
		data() {
			return {
				stat:-1,
				place:[],
				latitude: 30.3,
				longitude: 120.2,
				covers: [],  //标记点用于在地图上显示标记的位置
				polyline: [],
				scale:12,
				action:"",
			}
		},
		computed:{
			...mapGetters(["route"]),
			time(){
				const totalTimeCost = this.route.preparedAttractions.reduce((acc,spot) => acc + (+(spot.time ?? 0)),0)
				return totalTimeCost
			},
			amount(){
				const totalMoneyCost = this.route.preparedAttractions.reduce((acc,spot) => acc + (+(spot.amount ?? 0)),0)
				return totalMoneyCost
			}	
		},
		methods: {
			goBack(){
				this.completeRouteInfo()
				// 去第二步
				uni.navigateBack()
			},
			goForward(){
				this.completeRouteInfo()
				const action = this.action
				this.$navTo("pages/chux/addroute4",{action})
			},
			
			removeSpot(index){
				 this.route.preparedAttractions.splice(index,1)
			},
			completeRouteInfo(){
				const routeAttractions = this.route.preparedAttractions
											.map(spot => {
													return {
														attractionsId:spot.id || spot.attractionsId,
														time:spot.time,
														amount:spot.amount,
														description:spot.description
													}
												})
				this.$store.dispatch("route/setRouteAttractions",routeAttractions)
				this.$store.dispatch("route/setRouteAmount",this.amount)
				this.$store.dispatch("route/setRouteTime",this.time)
			},
			formatTimeInput(event,spot){
				const time = event.target.value
				if (+time > 24) {
					spot.time = "1"
				}
			},
		
		},
		
		onLoad(options){
			this.action = options.action
		}
	
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		height: 100%;
	}	
	
	.container{
		display: flex;
		.main{
			margin: auto;
			width: 600rpx;
					
			display: flex;
			flex-direction:column;
			align-items: center;
			gap:18px;
			
			.Row1{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:12px;
				
				.edit-heading{
					font-size: 24px;
					color:#383838;
					font-weight: 800;
					
				}
			}
			.Row2{
				width: 300px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			
				text-align: center;
				vertical-align: top;
				.one{
					font-size: 20px;
					font-weight: 700;
					color: #333;
				}
				.two{
					margin-top: 12px;
					color: rgba(33, 37, 41, 1);
				}
			}
		
			.Row3{
				margin: auto;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.m2{
					width: 500upx;
					height: 240upx;
					border: 3upx solid #000;
					border-radius: 20upx;
					map{
						width: 480upx;
						height: 220upx;
					}
				}
				
				.m3{
					margin-bottom: 24px;
					
					.attractions-list{
						gap:12px;
						margin-bottom: 24px;
						.attraction-item{
							gap:4px;
							width:100%;
							align-items: center;
							
							.pic{
								width: 160upx;
								height: 160upx;
								border-radius: 40upx;
								border: 3upx solid #000;
							}
							.txt{
								margin: 20upx;
								
								.spot-address{
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									width:140px;
								}
							}
						}
					}
					
				}
				
				.m4{
					display: flex;
					flex-direction: column;
					gap:20px;
					font-weight: 900;
					.v1{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						
						.title{
							margin-bottom: 4px;
						}
					}
				}
				
			}
			.Row4{
				width:100%;
				
				display: flex;
				flex-direction: column;
				gap:24px;
			
				justify-content: center;

				.m5{
					
					.route__summary{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: baseline;
						
						margin-bottom: 14px;
						color:#333;
						&__description{
							display: flex;
							flex-direction: column;
							gap: 14upx;
							margin: 20upx 0 20upx 40upx;	
						}
						&__title{
							font-weight: 900;
							font-size: 36upx;
							line-height:1.8;
						}
						&__note{
							font-size: 32upx;
						}
						&__number{
							font-weight: 900;
							font-size: 32upx;
						}
						.left{
							display: flex;
							align-items:center;
							gap:4px;
						}
					}
				}
				
			}
		}
	}
	
	

</style>
